<template>
  <input
    :class="cn(inputVariants({ color, size }), $attrs.class)"
    v-model="modelValue"
  />
</template>
<script setup lang="ts">
import { cva } from "class-variance-authority";
import { cn } from "../utils";
import type { Color, Size } from "../ui/types";

interface Props {
  color?: Color;
  size?: Size;
}
const inputVariants = cva("input", {
  variants: {
    color: {
      primary: "input-primary",
      secondary: "input-secondary",
      accent: "input-accent",
      neutral: "input-neutral",
      info: "input-info",
      success: "input-success",
      warning: "input-warning",
      error: "input-error",
    },
    size: {
      xs: "input-xs",
      sm: "input-sm",
      md: "input-md",
      lg: "input-lg",
      xl: "input-xl",
    },
  },
});
defineProps<Props>();
const modelValue = defineModel<string | number | boolean>();
</script>
